
<template>
<div style='padding:10px 30px'>
    <Button type="info" @click='get0'>News</Button>
    <Button type="info" @click='get1'>Users</Button>
    <Button type="info" @click='get2'>Products</Button>
    <Button type="info" @click='get3'>Upload</Button>
    <Button type="success" @click='addRoot' id='root'>Add Root</Button>
    <Tree :data="cate" :render="renderContent" @on-select-change='focus'  disabled=false></Tree>
</div>
</template>
<script>
  export default {
        data () {
            return {
                value: '',
                type:0,
                selected: true,
                expand: true,
                cate: [],

                render: (h, { root, node, data }) => {
                            return h('span', {
                                style: {
                                    display: 'inline-block',
                                    width: '100%'
                                }
                            }, [
                                h('span', [
                                    h('Icon', {
                                        props: {
                                            type: 'ios-folder-outline'
                                        },
                                        style: {
                                            marginRight: '8px',
                                            
                                        }
                                    }),
                                    h('span', data.title)
                                ]),
                                h('span', {
                                    style: {
                                        display: 'inline-block',
                                        float: 'right',
                                        marginRight: '32px',
                                        
                                    }
                                },
                                )
                            ],

                            );

                        },

                buttonProps: {
                    type: 'ghost',
                    size: 'small',
                },
                buttonProp: {
                    type: 'success',
                    size: 'small',
                },
            }
        },
        methods: {
            getData(){
            this.axios.get('http://10.31.160.71:3000/cate/list/0').then((response)=>{
              this.cate=response.data;
              this.expand=true;
             })
            },
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-plus-empty'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { this.handleRender(data) }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-minus-empty'
                            }),
                            on: {
                                click: () => { this.remove(data) }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProp, {
                                icon: 'ios-color-wand-outline'
                            }),
                            style: {
                                marginLeft: '10px'
                            },
                            on: {
                                click: () => { this.handleRenderUpdate(data) }
                            }
                        })
                    ])
                ]);
            },
            handleRender(data){
                this.$Modal.confirm({
                    render: (h) => {
                        return h('Input', {
                            props: {
                                value: this.value,
                                autofocus: true,
                                placeholder: 'Please enter node name...'
                            },
                            on: {
                                input: (val) => {
                                    this.value = val;
                                },
                            },
                        })
                    },
                    onOk: () => {
                            
                                this.append(data) ;
                            }
                })
            },
            append (data) {
                console.log(data);
                if(data==undefined){
                    this.$http
                    .post('http://10.31.160.71:3000/cate/data',{title:this.value,parentId:null,type:this.type})
                    .then(response=>{
                    this.axios.get('http://10.31.160.71:3000/cate/list/'+this.type).then((response)=>{
                    this.cate=response.data;
                    })
                    },error=>{
                    console.log(error);
                    });
                }
                    this.$http
                    .post('http://10.31.160.71:3000/cate/data',{title:this.value,parentId:data._id,type:this.type})
                    .then(response=>{
                    this.axios.get('http://10.31.160.71:3000/cate/list/'+this.type).then((response)=>{
                    this.cate=response.data;
                    })
                    },error=>{
                        console.log(error);
                    });
                    },

            remove (data) {
                 this.$http
                .delete('http://10.31.160.71:3000/cate/data/'+data._id)
                .then(response=>{
                    this.axios.get('http://10.31.160.71:3000/cate/list/'+this.type).then((response)=>{
                    this.cate=response.data;
                    })
                },error=>{
                    console.log(error);
    			});

            },

            handleRenderUpdate(data){
                this.$Modal.confirm({
                    render: (h) => {
                        return h('Input', {
                            props: {
                                value: this.value,
                                autofocus: true,
                                placeholder: 'Please editor node name...'
                            },
                            on: {
                                input: (val) => {
                                    this.value = val;
                                },
                            },
                        })
                    },
                    onOk: () => {
                                this.update(data) ;
                            }
                })
            },
            update (data) {
                     this.$http
                    .put('http://10.31.160.71:3000/cate/data/'+data._id,{title:this.value})
                    .then(response=>{
                    this.axios.get('http://10.31.160.71:3000/cate/list/'+this.type).then((response)=>{
                    this.cate=response.data;
                    })
                    },error=>{
                    console.log(error);
                    });

            },
            addRoot(){
                    this.handleRender();
             },
            get0(){
                    this.axios.get('http://10.31.160.71:3000/cate/list/0').then((response)=>{
                    this.cate=response.data;
                    this.type=0;
                }) },
            get1(){
                    this.axios.get('http://10.31.160.71:3000/cate/list/1').then((response)=>{
                    this.cate=response.data;
                    this.type=1
                })

             },
            get2(){
                    this.axios.get('http://10.31.160.71:3000/cate/list/2').then((response)=>{
                    this.cate=response.data;
                    this.type=2
                })

             },
            get3(){
                this.axios.get('http://10.31.160.71:3000/cate/list/3').then((response)=>{
                this.cate=response.data;
                this.type=3
            })

            },
            focus(data){
                console.log(data);
            }
        },
         created(){
          this.getData();
        }
    }

</script>
